<template>
    <!-- 审核弹窗  -->
    <el-dialog v-model="baTable.table.extend!.showAuditDialog" class="audit-dialog" align-center width="40%">
        <template #header>
            <div class="title">售后订单审核</div>
        </template>
        <div class="audit-dialog-form" v-if="baTable.table.extend!.orderData">
            <el-form :model="form" ref="formRef" :rules="rules">
                <el-form-item label="售后类型" class="type-tag">
                    <el-tag :type="refundTypeTagType(baTable.table.extend!.orderData.refund_type)">{{
                        $t('shop.order.refund.refund_type ' + baTable.table.extend!.orderData.refund_type)
                    }}</el-tag>
                </el-form-item>
                <FormItem
                    label="审核状态"
                    type="radio"
                    v-model="form.audit_status"
                    prop="audit_status"
                    :data="{
                        content: { 2: '同意', 3: '拒绝' },
                        childrenAttr: { border: true },
                    }"
                />
                <FormItem
                    v-if="form.audit_status == auditStatus.agree"
                    label="退货地址"
                    type="remoteSelect"
                    v-model="form.refund_address_id"
                    prop="refund_address_id"
                    :input-attr="{
                        pk: 'id',
                        field: 'full_address',
                        remoteUrl: '/admin/shop.delivery.address/index',
                        params: {
                            type: addressType.refund,
                        },
                        tooltipParams: {
                            '联系人': 'name',
                            '联系方式': 'phone'
                        }
                    }"
                />
                <FormItem
                    v-if="form.audit_status == auditStatus.refuse"
                    label="拒绝原因"
                    type="textarea"
                    v-model="form.refuse_reason"
                    prop="refuse_reason"
                    :input-attr="{ 'show-word-limit': true, rows: 4 }"
                    placeholder="请输入拒绝原因"
                />
            </el-form>
        </div>
        <template #footer>
            <view class="dialog-footer">
                <el-button @click="baTable.table.extend!.showAuditDialog = false">取消</el-button>
                <el-button type="primary" @click="onAudit">确定</el-button>
            </view>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, reactive, ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
const baTable = inject('baTable') as baTableClass
import FormItem from '/@/components/formItem/index.vue'
import { buildValidatorData } from '/@/utils/validate'
import { FormItemRule } from 'element-plus'
import { auditRefundOrder } from '/@/api/backend/shop/order/refund'
import { auditStatus, refundTypeTagType } from './index'
import { addressType } from '/@/views/backend/shop/delivery/address/index'

const form = ref({
    id: baTable.table.extend!.orderData.id,
    audit_status: auditStatus.agree,
    refund_address_id: '',
    refuse_reason: '',
})
const formRef = ref()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    audit_status: [buildValidatorData({ name: 'required', title: '审核状态' })],
    refund_address_id: [buildValidatorData({ name: 'required', title: '退货地址' })],
    refuse_reason: [buildValidatorData({ name: 'required', title: '拒绝原因' })],
    apply_money: [buildValidatorData({ name: 'required', title: '退款金额' })],
    refund_freight: [buildValidatorData({ name: 'required', title: '退款运费' })],
})

// 售后审核
const onAudit = async () => {
    const result = ref(false)
    await formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            const res = await auditRefundOrder(form.value)
            result.value = Boolean(res.code)
        }
        if (result.value) {
            baTable.table.extend!.showDetailDialog = false
            baTable.table.extend!.showAuditDialog = false
            baTable.onTableHeaderAction('refresh', {})
        }
    })
}
</script>

<style lang="scss" scoped>
.audit-dialog-form {
    margin: 30px;
}

.type-tag {
    margin-left: 10px;
}
</style>
